<template>
  <div class="login">
    <div class="login_box">
      <div class="bimg1">
        <img src="../assets/login_bimg1.png" alt="" />
      </div>
      <div class="welcome">
        <h2 style="color: #8da0b8; font-size: 0.3rem">欢迎登录</h2>
        <h1 style="color: #0e3567; font-size: 0.475rem">超市管理系统</h1>

        <!-- 表单组件 -->
        <el-form ref="loginFormRef" :rules="loginRules" :model="loginForm" class="login_form" label-width="0">
          <!-- 账号 -->
          <p>账号</p>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <p>密码</p>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="login()">登录</el-button>
            <el-button type="info" @click="resetLoginForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="register">
        <!-- <p>还没有账号？去<router-link to="/register">注册</router-link></p> -->
        <!-- <p>回到<router-link to='/home'>首页</router-link></p> -->
      </div>
    </div>
    <div class="bimg2">
      <img src="../assets/yuansu1.webp" alt="" />
    </div>
  </div>
</template>

<script>
import { login,getUserInfo } from "@/api/common";
import { encrypt,decrypt,encryptData } from "@/utils/aes";
export default {
  data() {
    return {
      //表单数据对象
      loginForm: {
        username: "",
        password: "",
      },
      //验证对象
      loginRules: {
        //校验用户名
        username: [
          { required: true,message: "用户名为必填项！",trigger: "blur" },
          {
            max: 12,
            message: "长度在 小于 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true,message: "密码为必填项！",trigger: "blur" },
          { min: 2,max: 15,message: "长度在 2 ~ 15 个字符",trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async login() {
      //1、验证校验规则
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return; // 验证失败
        // const { data: res } = await this.$http.post("login", this.loginForm); // 访问后台
        const values = {
          ...this.loginForm,
          password: encryptData(this.loginForm.password)
        }
        console.log(values.password)
        login(values).then((res) => {
          localStorage.setItem("token",res.token);
          localStorage.setItem("menus",JSON.stringify(res.menus));
          getUserInfo().then((res) => {
            window.localStorage.setItem("user_info",JSON.stringify(res));

            if (res.post_id == 1 || res.post_id == 2) {

              this.$router.push({
                path: "home",
              });

              window.location.reload()
            } else {
              this.$router.push({
                path: "clock",
              });
              window.location.reload()
            }


          });

        });


      });
    },

    //重置按钮
    resetLoginForm() {
      (this.loginForm.password = ""),(this.loginForm.username = "");
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  // height: auto;
  display: flex;
  justify-content: space-between;

  .login_box {
    // float: left;
    flex: 0 0 600px;
  }

  .bimg1 {
    img {
      width: 8rem;
    }
  }

  .welcome {
    margin: -0.5rem 0 0 2.5rem;
  }

  p {
    font-size: 0.225rem;
    color: #8da0b8;
    margin-top: 0.625rem;
    margin-bottom: 0.1rem;
  }

  .el-input {
    border: 0;
    outline: none;
    width: 5rem;
    padding: 0.125rem;
    padding-left: 0;
    font-size: 0.175rem;
    color: #0e3567;
    font-weight: 600;
  }

  .el-input::-webkit-input-placeholder {
    color: #dfe0e2;
    font-weight: 400;
  }

  .el-button {
    background: #4164df;
    width: 1.5rem;
    height: 0.5rem;
    border: 0;
    border-radius: 0.25rem;
    color: white;
    font-weight: 600;
    letter-spacing: 0.0125rem;
    font-size: 0.2rem;
    padding-top: 7px;
  }
}

.register {
  margin: 0.625rem 2.5rem;
  color: #8da0bf;

  a {
    color: #0e3567;
  }
}

.bimg2 {
  // float: left;
  background-image: linear-gradient(#d1dcf6, #436de1);
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-top: -3.19rem;
  // margin-left: 3.22rem;
  flex: 1;

  img {
    // width: 13.149rem;
  }
}
</style>
